<template>
  <div class="form-page">
    <Card :bordered="false" :dis-hover="true">
      <p slot="title" style="color: #666;">
        <span
          class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"
          style="font-size: 20px;"
        ></span> 新增标签
      </p>
      <p slot="extra" style="color: #999;font-size: 12px;">
        <label style="color: #FF3B30;">*</label> 为必填
      </p>

      <Form
        ref="formValidate"
        :model="bloc.model"
        :rules="ruleValidate3"
        :label-width="111"
        style="padding:50px 10% 0 10%;width: 860px"
      >
        <FormItem label="标签分类:" prop="labelsortId" required>
          <Select  v-model="bloc.model.labelsortId"  style="width: 400px">
            <Option
              v-for="(item,index) in bloc.sortList"
              :value="item.labelsortId"
              :key="index"
            >{{ item.labelsortname }}
            </Option>
          </Select>
        </FormItem>

        <FormItem label="标签名称:" prop="labelname" required>
          <Input v-model="bloc.model.labelname" style="width: 400px"/>
        </FormItem>


        <FormItem label="所属品牌商:" prop="companyId" required>
          <CompanySeletorSingle :companyId="bloc.model.companyId" style="width: 400px"
                                @on-change="value=>bloc.model.companyId=value"></CompanySeletorSingle>
        </FormItem>

      </Form>
      <div style="margin: 20px 0px 35px 25px;">
        <Button style="width: 100px;height: 40px;" @click="handleCancel()">返回</Button>
        <AppButton ref="add"
                   style="margin-left: 30px;width: 100px;height: 40px;"
                   type="primary"
                   @click="addLabel('formValidate')"
        >保存
        </AppButton>
      </div>
    </Card>
  </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import {store} from '@/store/Store';
    import {baseUrl} from '@/base/Request';
    import {Route} from 'vue-router';
    import {EditBloc} from '@/view/label/EditBloc';
    import CompanySeletorSingle from '@/component/CompanySeletorSingle.vue';
    import {AppButton} from '@/type/AppButton';
    import { isEmpty } from '@/base/util/Strings';

    @Component({
        components: {CompanySeletorSingle}
    })
    export default class extends Vue {
        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next(vm => {
                vm.bloc.getCompanyList(vm.bloc.company.pageIndex, vm.bloc.company.pageSize, 'ASC')
                vm.bloc.getAllSort(1, 1000, 'ASC');
            });
        }

        bloc = new EditBloc();

        validateId1 = (rule: any, value: string, callback: any) => {
            isEmpty(this.bloc.model.companyId)
                ? callback(new Error('所属品牌商不能为空')): callback();
        };

        validateId2 = (rule: any, value: string, callback: any) => {
            isEmpty(this.bloc.model.labelsortId)
                ? callback(new Error('标签分类不能为空')): callback();
        };

        ruleValidate3: any = {
            companyId: [
                {validator: this.validateId1, trigger: 'blur'}
            ],
            labelname: [{required: true, message: '标签名称不能为空', trigger: 'blur'}],
            labelsortId: [{ validator: this.validateId2, trigger: 'blur'}]
        };



        // +型号
        addLabel(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.$refs.add.bloc.loading = true;
                    this.bloc
                        .addLabel(this.bloc.model)
                        .then(res => {
                            this.$Message.success('保存成功');
                            this.$refs.add.bloc.loading = false;
                            this.handleCancel();
                        })
                        .catch(res => {
                            this.$Message.error('保存失败');
                            this.$refs.add.bloc.loading = false;
                        })
                }
            });
        }

        handleCancel() {
            this.$router.push({path: '/label'});
        }

        $refs!: {
            add: AppButton
            formValidate: HTMLFormElement;
        };
    }
</script>

<style lang="less" scoped>
  /deep/ .ivu-form-item-content {
    display: flex !important;
    justify-content: start !important;
    align-items: center !important;
  }
</style>
